import React, {Component} from 'react';
import {connect} from "react-redux";
import NavBar, {NavButton, NavTitle} from 'react-native-nav'
import {Alert, Dimensions, StyleSheet,ScrollView, View,Text} from 'react-native'
import Icon from "react-native-vector-icons/FontAwesome5";
const {height, width} = Dimensions.get('window');
import Ionicons from 'react-native-vector-icons/Ionicons';
import Feather from 'react-native-vector-icons/Feather';
import { Tabs } from '@ant-design/react-native';

class Star extends Component {
    constructor(props) {
        super(props);
        this.state = {
            refreshing: false,
        };
    }

    render() {
        return (
            <View>
                <NavBar style={styles} statusBar={{backgroundColor:'rgba(0,0,0,0)'}}>
                    <NavButton
                        style={styles.button}
                        onPress={() => {
                            console.log(this.props.mainNavigation);
                            this.props.mainNavigation.pop()
                        }}
                    >
                        <Ionicons name="ios-arrow-back" size={30} color="#3396fb"/>
                    </NavButton>
                    <NavTitle style={styles.title}>
                        {"我的积分"}
                    </NavTitle>
                </NavBar>
                    <View style={styles.card}>

                        <View>
                            <Text style={{margin:20,fontSize:20,color:'#fff',fontFamily:'黑体',fontWeight: 'bold'}}>
                                积分总额
                            </Text>
                        </View>


                        <View style={{flexDirection:'row',alignItems: 'center',marginLeft:20}}>
                            <Icon name='coins' size={20} color="#fabe3c" />

                            <Text style={{fontSize:20,marginLeft: 15,color:'#fff',fontFamily:'黑体',fontWeight: 'bold'}}>
                                {2500}
                            </Text>
                        </View>
                        <View style={{marginTop:45,marginLeft:20,flexDirection:'row',alignItems:'center'}}>
                            <Feather name={'info'} size={15} color={"#fff"}></Feather>
                            <Text style={{color:'#fff'}}> 点击查看积分详细计算说明</Text>

                        </View>
                    </View>
                    <View style={{height:800}}>
                        <Tabs tabs={[{ title: '已获得' },{title: '已使用' }]} initialPage={0} tabBarPosition="top">
                            <View style={{alignItems:'center',justifyContent:'center',margin:10}}>
                                <View style={{justifyContent:'center'}}>
                                    <View style={{height:50,alignItems:'center',justifyContent:'center'}}>
                                        <Text style={{fontSize:15,textAlign :'center'}}>您回答了小浩的问题：VBS在电视广播中应用的原因？</Text>
                                    </View>
                                    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                                        <Text style={{fontSize:10,margin:5}}>2019年3月12日</Text>
                                        <Text style={{color:'red',margin:5}}>+200</Text>
                                    </View>
                                    <View style={{height:3,backgroundColor:'#ddd'}}></View>
                                </View>
                                <View style={{justifyContent:'center'}}>
                                    <View style={{height:50,alignItems:'center',justifyContent:'center'}}>
                                        <Text style={{fontSize:15,textAlign :'center'}}>您回答了小浩的问题：VBS在电视广播中应用的原因？</Text>
                                    </View>
                                    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                                        <Text style={{fontSize:10,margin:5}}>2019年3月12日</Text>
                                        <Text style={{color:'red',margin:5}}>+200</Text>
                                    </View>
                                    <View style={{height:3,backgroundColor:'#ddd'}}></View>
                                </View>
                                <View style={{justifyContent:'center'}}>
                                    <View style={{height:50,alignItems:'center',justifyContent:'center'}}>
                                        <Text style={{fontSize:15,textAlign :'center'}}>您回答了小浩的问题：VBS在电视广播中应用的原因？</Text>
                                    </View>
                                    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                                        <Text style={{fontSize:10,margin:5}}>2019年3月12日</Text>
                                        <Text style={{color:'red',margin:5}}>+200</Text>
                                    </View>
                                    <View style={{height:3,backgroundColor:'#ddd'}}></View>
                                </View>
                                <View style={{justifyContent:'center'}}>
                                    <View style={{height:50,alignItems:'center',justifyContent:'center'}}>
                                        <Text style={{fontSize:15,textAlign :'center'}}>您回答了小浩的问题：VBS在电视广播中应用的原因？</Text>
                                    </View>
                                    <View style={{flexDirection:'row',justifyContent:'space-between'}}>
                                        <Text style={{fontSize:10,margin:5}}>2019年3月12日</Text>
                                        <Text style={{color:'red',margin:5}}>+200</Text>
                                    </View>
                                    <View style={{height:3,backgroundColor:'#ddd'}}></View>
                                </View>
                            </View>
                        </Tabs>
                    </View>

            </View>
        )

    }

}


const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    statusBar: {
        backgroundColor: '#fff',
        height: height * 0.05,
    },
    navBar: {
        backgroundColor: '#fff',
    },
    title: {
        flex: 1,
        textAlign: 'left',
        color: '#rgba(0, 0, 0, 0.65)',
    },
    buttonText: {
        color: '#rgba(0, 0, 0, 0.45)',
    },
    card:{
        height:height*0.25,
        margin:10,
        borderRadius:10,
        color:'#fff',
        backgroundColor:'#3396fb',
 shadowOffset: {width: 0, height: 5},
shadowOpacity: 0.5,
    shadowRadius: 5,
    shadowColor: '#000',
    elevation: 4,
    zIndex: 0

    },
    button: {
        marginLeft: 0,
        marginRight:20
    },
});


export default connect(
    (state) => {
        return {
            mainNavigation: state.mainNavigation
        }
    }
)(Star)
